<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>嵌套路由</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.2">
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <p>
            <router-link to="/user/foo">/user/foo</router-link>
            <router-link to="/user/foo/profile">/user/foo/profile</router-link>
            <router-link to="/user/foo/posts">/user/foo/posts</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script type="text/javascript">
    const User = {
        template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
    }

    const UserHome = {
        template: '<div>Home</div>'
    }
    const UserProfile = {
        template: '<div>Profile</div>'
    }
    const UserPosts = {
        template: '<div>Posts</div>'
    }
    const router = new VueRouter({
        routes: [{
            path: '/user/:id',
            component: User,
            children: [
                // UserHome will be rendered inside User's <router-view>
                // when /user/:id is matched
                {
                    path: '',
                    component: UserHome
                },

                // UserProfile will be rendered inside User's <router-view>
                // when /user/:id/profile is matched
                {
                    path: 'profile',
                    component: UserProfile
                },

                // UserPosts will be rendered inside User's <router-view>
                // when /user/:id/posts is matched
                {
                    path: 'posts',
                    component: UserPosts
                }
            ]
        }]
    })

    const app = new Vue({
        router
    }).$mount('#app')
    </script>
</body>

</html>
